<!-- 示例4: 自定义插槽 -->
<template>
  <Table 
    :data="orders" 
    :columns="columns"
    :virtualScroll="true"
  >
    <template #header-status="{ column }">
      <span style="color: blue">{{ column.title }}</span>
    </template>

    <template #cell-status="{ row }">
      <span :style="{ color: row.status === '完成' ? 'green' : 'red' }">
        {{ row.status }}
      </span>
    </template>
  </Table>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟订单数据 - 增加更多数据
const orders = ref([
  { title: 'ORD001', customer: '张三', amount: 1999, status: '完成', date: '2024-03-01' },
  { title: 'ORD002', customer: '李四', amount: 2999, status: '待付款', date: '2024-03-02' },
  { title: 'ORD003', customer: '王五', amount: 3999, status: '完成', date: '2024-03-03' },
  { title: 'ORD004', customer: '赵六', amount: 4999, status: '待发货', date: '2024-03-04' },
  { title: 'ORD005', customer: '钱七', amount: 5999, status: '完成', date: '2024-03-05' },
  { title: 'ORD006', customer: '孙八', amount: 6999, status: '待付款', date: '2024-03-06' },
  { title: 'ORD007', customer: '周九', amount: 7999, status: '完成', date: '2024-03-07' },
  { title: 'ORD008', customer: '吴十', amount: 8999, status: '待发货', date: '2024-03-08' },
  // 添加更多数据
  { title: 'ORD009', customer: '郑十一', amount: 9999, status: '完成', date: '2024-03-09' },
  { title: 'ORD010', customer: '冯十二', amount: 10999, status: '待付款', date: '2024-03-10' },
  { title: 'ORD011', customer: '朱十三', amount: 11999, status: '完成', date: '2024-03-11' },
  { title: 'ORD012', customer: '陈十四', amount: 12999, status: '待发货', date: '2024-03-12' },
  { title: 'ORD013', customer: '魏十五', amount: 13999, status: '完成', date: '2024-03-13' },
  { title: 'ORD014', customer: '蒋十六', amount: 14999, status: '待付款', date: '2024-03-14' },
  { title: 'ORD015', customer: '沈十七', amount: 15999, status: '完成', date: '2024-03-15' },
  { title: 'ORD016', customer: '韩十八', amount: 16999, status: '待发货', date: '2024-03-16' },
  { title: 'ORD017', customer: '杨十九', amount: 17999, status: '完成', date: '2024-03-17' },
  { title: 'ORD018', customer: '朱二十', amount: 18999, status: '待付款', date: '2024-03-18' }
])

// 列配置
const columns = [
  { title: '订单号', dataIndex: 'title' },
  { title: '客户', dataIndex: 'customer' },
  { title: '金额', dataIndex: 'amount', 
    render: (amount) => `¥${amount.toLocaleString()}` },
  { title: '状态', dataIndex: 'status' },
  { title: '日期', dataIndex: 'date' }
]
</script>

<style scoped>
.table-container {
  padding: 20px;
}
</style>